<template>
    <div>
        <div class="user" v-show="bool">
            <div>
                <van-image
                   round
                   width="4.5rem"
                   height="4.5rem"
                   src="	"
                />
            </div>
            <p @click="login()">点击登录</p>
           <van-icon name="arrow" />
        </div>
        <div class="user" v-show="!bool">
            <div>
                <van-image
                   round
                   width="4.5rem"
                   height="4.5rem"
                   :src="avatar"
                />
            </div>
            <p>{{nickname}}</p>
            <van-icon name="cross" @click="Logout()"/>
        </div>
        <van-overlay :show="show" @click="show = false">
               <div class="wrapper" >
                 <div class="block" @click.stop>
                 <van-form @submit="onSubmit">
                    <van-field
                       v-model="username"
                       name="name"
                       label="用户名"
                       placeholder="用户名"
                       :rules="[{ required: true, message: '请填写用户名' }]"
                   />
                 <van-field
                     v-model="password"
                     name="password"
                     type="password"
                     label="密码"
                     placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                   />
                  <div style="margin: 16px;">
                     <van-button round block type="info" native-type="submit">提交</van-button>
                  </div>
                 </van-form>
                 </div>
               </div>
          </van-overlay>
        <van-grid :column-num="3" class="grid">
          <van-grid-item icon="label-o" text="我的订单" />
          <van-grid-item icon="bill-o" text="优惠券" />
          <van-grid-item icon="goods-collect-o" text="礼品卡" />
          <van-grid-item icon="location-o" text="我的收藏" />
          <van-grid-item icon="flag-o" text="我的足迹" />
          <van-grid-item icon="contact" text="会员福利" />
          <van-grid-item icon="aim" text="地址管理" />
          <van-grid-item icon="warn-o" text="账号安全" />
          <van-grid-item icon="service-o" text="联系客服" />
          <van-grid-item icon="question-o" text="帮助中心" />
          <van-grid-item icon="smile-comment-o" text="意见反馈" />
        </van-grid>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast ,Dialog} from 'vant';
Vue.use(Toast);
Vue.use(Dialog);
import {GetLoginuser} from '@/request/api.js'
export default {
    data(){
        return{
             show: false,
             username: 'wuyanzu',
             password: '123456789',
             token:'',
             userInfo:"",
             bool:true,
             nickname:'',
             avatar:''
        }   
    },
    methods:{
        login(v){
            this.show=!this.show;
        },
        onSubmit(values) {
            Toast.loading({
                   message: '加载中...',
                  forbidClick: true,
            });
            console.log('submit',values);
            GetLoginuser({username:values.name,pwd:values.password}).then(res=>{
                // console.log(res);
                this.token=res.data.token
                this.userInfo=res.data.userInfo
                localStorage.setItem('token',this.token)
                localStorage.setItem('username',res.data.userInfo.username)
                localStorage.setItem('avatar',res.data.userInfo.avatar)
                this.bool=!this.bool

                this.nickname=res.data.userInfo.username
                this.avatar=res.data.userInfo.avatar

            })
            this.show=!this.show
        },
         Logout(){
             function beforeClose(action, done) {
                  if (action === 'confirm') {
                    setTimeout(done, 50);
                   } else {
                       done();
                   }
             };
            Dialog.confirm({
                title: '登出账号确认',
                message: '你是否想要退出当前账号',
                beforeClose,
             }).then(() => {
                   this.bool=!this.bool
                   localStorage.clear(this.token)
             }).catch(() => {
                  this.bool=this.bool
             });
        }
    },
    created(){
        if(localStorage.getItem('token')){
            this.bool=!this.bool
            this.nickname=localStorage.getItem('username')
            this.avatar=localStorage.getItem('avatar')
        }else{
            this.bool=this.bool
        }
    }
}
</script>

<style lang="less">
.user{
    width: 100%;
    height: 100px;
    background: black;
    line-height: 100px;
    position: relative;
}

.van-image--round{
    // margin-top: 10px;
    position: absolute;
    top:14px;
    left: 10px;
}
.user p{
    color: white;
    position: absolute;
    left: 6rem;
    font-size:13px;

}
.van-icon-arrow{
    color: white;
    position: absolute;
    right: 10px;
    margin-top: 40px;
    
}
.van-icon-cross{
    color: white;
    position: absolute;
    right: 10px;
    margin-top: 40px;
}
.grid .van-grid-item{
    height: 125.1px;
}
.van-overlay{
    z-index: 2;
}
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    padding-top: 10px;
    width: 350px;
    height: 200px;
    border-radius: 10px 10px;
    background-color: #fff;
  }
</style>